<template>
	<view class="msg">
		<view>
			<u-tabs-swiper ref="tabs" active-color="#BB0000FF" :current="current" @change="tabsChange" :list="list" :is-scroll="false"></u-tabs-swiper>
		</view>
		<swiper 
		class="swiper_msg"
		:effect3d="true"
		:current="swiperCurrent" 
		@transition="transition" 
		@animationfinish="animationfinish">
			<swiper-item  v-for="(item1, index) in list" :key="index">
				<view style="margin-top: 25vh;" v-show="item1.isempty">
					<u-empty text="无历史记录" mode="history"></u-empty>
				</view>
				<scroll-view 
				v-show="!item1.isempty"
				scroll-y 
				@scrolltolower="loaderList"
				class="scroll_swiper">
					<yt-card-time :time="item.create_date" head=" " v-for="(item,index1) in item1.cartList" :key="index1" v-show="item.show">
						<u-row :gutter="12">
							<u-col :span="8" class="title-text">
								<image style="width: 53.4rpx;height: 53.4rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/1ff0c131-54a0-4822-b477-b445c7a410ca.png"></image>
								<text class="text">
									审批	
								</text>
								<view class="title">
									<text style="margin-right: 21.36rpx;">{{item.applicant}}</text>提交的
									<text v-show="!item.istransfer">出库</text>
									<text v-show="item.istransfer">转库</text>审批
								</view>
								<view style="font-size: 32.04rpx;margin-top: 26.7rpx;">
									出货仓库：<text style="color: #BB0000FF;">{{item.outhouse}}</text>
								</view>
								<view style="font-size: 32.04rpx;margin-top: 8.01rpx;">
									货品数量：<text style="color: #BB0000FF;">{{item.cart_names.length}}件</text>
								</view>
							</u-col>
							<u-col :span="4">
								<!-- 这里只显示已通过的，等下要修改 -->
								<!-- 待审批--><image v-show="!item.isfinish" style="width: 234.96rpx;height: 234.96rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/ed67ef42-6d9d-4913-8b37-2e6a9de4e833.png"></image>
							</u-col>
						</u-row>
						<scroll-view scroll-y style="background-color: #F1F1F1;border-radius: 10rpx; max-height:11vh;font-size: 32.04rpx;margin-top: 8.01rpx;margin-left: 5.34rpx;margin-bottom: 26.7rpx;">
							<u-row :gutter="12">
								<u-col :span="6" v-for="(item2,index2) in item.cart_names" :key="index2">
									<text>
										商品名称：<text style="color: #BB0000FF;">{{item2.cartName}}</text>
									</text>
								</u-col>
							</u-row>
						</scroll-view>
						<view class="sp-button" v-show = "testMan(item)">
							<button class="tg" @click="agree(item.cart_names,item._id,index1)">通过</button>
							<button class="jj" @click="notagree(item.cart_names,item._id,index1)">拒绝</button>
						</view>
					</yt-card-time>
					<view class="gap_phone">
						<u-divider class="gaps" :margin-top="60" bg-color="#EEEEEEFF" border-color="#5f5f5f00">
							<u-loadmore v-show="isLoader" :status="status"/>
						</u-divider>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<yt-tabbar></yt-tabbar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ytTabbar from '../../comment/yt-tabbar.vue'
	import ytCardTime from '../../comment/yt-card-time.vue'
	export default {
		data() {
			return {
				list: [
					{
						name: '待审出库',
						cartList:[],
						isempty:true
					}, {
						name: '待审转库',
						cartList:[],
						isempty:true
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的	
				isrefresher:false ,//是否下拉刷新,
				limit:0,
				isall:true,
				status: 'loadmore',
				isLoader:false//测试用,
			};
		},
		onShow() {
			this.list.map(item=>{
				item.cartList.splice(0,item.cartList.length)
			})
			this.getCartList()
		},
		methods: {
			testMan(item){
				return uni.getStorageSync('lastUsername') != item.applicant ? true : false
			},
			loaderList(e){
				console.log(this.current)
				var Vue = this;
				if(this.current == 0){
					uniCloud.callFunction({
						name: 'uni-id-cf_mobile',
						data: {
							action:"looksp",
							params:{
								keyword:'',
								moonth:'',
								sp_type:false,
								num_sp:Vue.limit,
								isall_sp:Vue.isall
							}
						}
					}).then(({result}) => {
						if(result.code){
							this.$refs.uToast.show({
								title: '出错了！请重新登录。',
								type: 'error',
								position:"top"
							})
							uni.reLaunch({
								url:'../login/login'
							})
							return;
						}
						this.list[0].cartList.splice(0,this.list[0].cartList.length)
						let {splength,data} = result
						data.data.map((item,index)=>{
							this.list[0].cartList.push(item)
							if(!item.isfinish){
								this.list[0].cartList[index].show = true
							}else{
								this.list[0].cartList[index].show = false
							}
						})
						let canShowempty = 0
						this.list[0].cartList.map((item)=>{
							if(item.show){
								canShowempty--
							}
						})
						this.list[0].cartList.reverse()
						if(this.list[0].cartList.length == 0 || canShowempty == 0){
							this.list[0].isempty = true
						}else{
							this.list[0].isempty = false
						}
						console.log(data)
					}).catch(err => {
						this.$refs.uToast.show({
							title: err,
							type: 'error',
							position:"top"
						})
					})
				}else{
					uniCloud.callFunction({
						name: 'uni-id-cf_mobile',
						data: {
							action:"looksp",
							params:{
								keyword:'',
								moonth:'',
								sp_type:true,
								num_sp:Vue.limit,
								isall_sp:Vue.isall
							}
						}
					}).then(({result}) => {
						if(result.code){
							this.$refs.uToast.show({
								title: '出错了！请重新登录。',
								type: 'error',
								position:"top"
							})
							uni.reLaunch({
								url:'../login/login'
							})
							return;
						}
						this.list[1].cartList.splice(0,this.list[1].cartList.length)
						let {splength,data} = result
						data.data.map((item,index)=>{
							this.list[1].cartList.push(item)
							if(!item.isfinish){
								this.list[1].cartList[index].show = true
							}else{
								this.list[1].cartList[index].show = false
							}
						})
						let canShowempty = 0
						this.list[1].cartList.map((item)=>{
							if(item.show){
								canShowempty--
							}
						})
						this.list[1].cartList.reverse()
						if(this.list[1].cartList.length == 0 || canShowempty == 0){
							this.list[1].isempty = true
						}else{
							this.list[1].isempty = false
						}
						console.log(data)
					}).catch(err => {
						this.$refs.uToast.show({
							title: err,
							type: 'error',
							position:"top"
						})
					})
				}
			},
			getCartList(){
				var Vue = this
				uni.showLoading({
					title:"加载中。。。"
				})
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"looksp",
						params:{
							keyword:'',
							moonth:'',
							sp_type:false,
							num_sp:Vue.limit,
							isall_sp:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code != 0){
						uni.hideLoading()
						this.$refs.uToast.show({
							title: result.errMsg || result.msg,
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}else{
						let {splength,data} = result
						data.data.map((item,index)=>{
							this.list[0].cartList.push(item)
							if(!item.isfinish){
								this.list[0].cartList[index].show = true
							}else{
								this.list[0].cartList[index].show = false
							}
						})
						let canShowempty = 0
						this.list[0].cartList.map((item)=>{
							if(item.show){
								canShowempty--
							}
						})
						this.list[0].cartList.reverse()
						if(this.list[0].cartList.length == 0 || canShowempty == 0){
							this.list[0].isempty = true
						}else{
							this.list[0].isempty = false
						}
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})	
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"looksp",
						params:{
							keyword:'',
							moonth:'',
							sp_type:true,
							num_sp:Vue.limit,
							isall_sp:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code != 0){
						uni.hideLoading()
						this.$refs.uToast.show({
							title: result.errMsg || result.msg,
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}else{
						let {splength,data} = result
						data.data.map((item,index)=>{
							this.list[1].cartList.push(item)
							if(!item.isfinish){
								this.list[1].cartList[index].show = true
							}else{
								this.list[1].cartList[index].show = false
							}
						})
						let canShowempty = 0
						this.list[1].cartList.map((item)=>{
							if(item.show){
								canShowempty--
							}
						})
						this.list[1].cartList.reverse()
						if(this.list[1].cartList.length == 0 || canShowempty == 0){
							this.list[1].isempty = true
						}else{
							this.list[1].isempty = false
						}
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})	
			},
			agree(cart_names,sp_id,index){
				console.log('同意')
				console.log(cart_names)
				console.log(sp_id)
				var Vue = this;
				uni.showModal({
					content:'您确认通过审批？',
					success(config) {
						if(config.confirm){
							uni.showLoading({
								title:"执行中。。。"
							})
							uniCloud.callFunction({
								name: 'uni-id-cf_mobile',
								data: {
									action:"outerhouse",
									params:{
										cart_id_outerhouse:cart_names,
										isagree_outerhouse:true,
										isfinish_outerhouse:true,
										sp_id_outerhouse:sp_id,
										applicant_sp_outerhouse:uni.getStorageSync("lastUsername"),
										applicant_sp_id_outerhouse:uni.getStorageSync("user_id")
									}
								}
							}).then(({result}) => {
								let {code,msg} = result
								if(code == 0){
									Vue.list[Vue.current].cartList.splice(index,1)
									Vue.list.map(item=>{
										item.cartList.splice(0,item.cartList.length)
									})
									Vue.getCartList()
									uni.hideLoading()
									Vue.$refs.uToast.show({
										title: msg,
										type: 'success'
									})	
								}else{
									uni.hideLoading()
									Vue.$refs.uToast.show({
										title: result.errMsg || msg,
										type: 'error'
									})				
								}
								console.log(result)
							})
						}
					}
				})
			},
			notagree(cart_names,sp_id,index){
				console.log('拒绝')
				var Vue = this;
				uni.showModal({
					content:'您确认拒绝审批？',
					success(config) {
						if(config.confirm){
							uni.showLoading({
								title:"执行中。。。"
							})
							uniCloud.callFunction({
								name: 'uni-id-cf_mobile',
								data: {
									action:"outerhouse",
									params:{
										cart_id_outerhouse:cart_names,
										isagree_outerhouse:false,
										isfinish_outerhouse:true,
										sp_id_outerhouse:sp_id,
										applicant_sp_outerhouse:uni.getStorageSync("lastUsername"),
										applicant_sp_id_outerhouse:uni.getStorageSync("user_id")
									}
								}
							}).then(({result}) => {
								let {code,msg} = result
								if(code == 0){
									Vue.list[Vue.current].cartList.splice(index,1)
									Vue.list.map(item=>{
										item.cartList.splice(0,item.cartList.length)
									})
									Vue.getCartList()
									uni.hideLoading()
									Vue.$refs.uToast.show({
										title: msg,
										type: 'success'
									})	
								}else{
									uni.hideLoading()
									Vue.$refs.uToast.show({
										title: result.errMsg || msg,
										type: 'error'
									})				
								}
								console.log(result)
							})
						}
					}
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
			
		},
		components:{
			ytTabbar,
			ytCardTime
		}
	}
</script>

<style lang="scss">

.sp-button{
	display: flex;
	.tg{
		width: 280rpx;
		height: 98.79rpx;
		background-color: #12AD27FF;
		color: #fff;
		border-radius: 53.4rpx;
		font-size: 42.72rpx;
		line-height: 93.45rpx;
	}
	.jj{
		width: 280rpx;
		height: 98.79rpx;
		background-color:#E71222FF ;
		color: #fff;
		border-radius: 53.4rpx;
		font-size: 42.72rpx;
		line-height: 93.45rpx;
	}
}
.title-text{
	.text{
		vertical-align: top;
		font-size: 42.72rpx;
		color: #F39801FF;
		margin-left: 26.7rpx;
	}
	.title{
		margin-top:13.35rpx ;
		font-size: 40.05rpx;
	}
}
.msg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #EEEEEEFF;
}
.swiper_msg{
	@function swiperHeight($n){
		@return $n
	}
	height: swiperHeight(86%);
	.scroll_swiper{
		height: 100%;
	}
	.gap_phone{
		height: 130rpx;
		width: 100%;
	}
}
</style>
